<template>
    <div class="content-wrapper-view">
        <div class="content-wrapper-body">
        	<!-- 工具栏- -->
            <div class="filter-wrapper">
                <el-form ref="filterForm" :model="listQuery" :inline="true">
                    
                    <el-form-item size="medium">
                        <el-cascader
                            clearable
                            :options="organizationOptions"
                            :props="defaultProps"
                            v-model="orgIds"
                            @change="handleChangeOrganizationCascader"
                            :show-all-levels="false"
                            placeholder="机构部门" 
                            style="width: 200px"
                            >
                        </el-cascader>
                    </el-form-item>

                    <el-form-item size="medium">
                        <el-cascader
                            clearable
                            :options="positionOptions"
                            :props="defaultProps"
                            v-model="positionIds"
                            @change="handleChangePositionCascader"
                            :show-all-levels="false"
                            placeholder="岗位" 
                            style="width: 200px"
                            >
                        </el-cascader>
                    </el-form-item>

                    <el-form-item prop="name" size="medium">
                        <el-input v-model="listQuery.name" placeholder="关键字" clearable></el-input>
                    </el-form-item>

                    <el-form-item prop="status" size="medium">
                        <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 100px">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.key"
                                    :label="item.label"
                                    :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                    <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
                    <el-button :disabled="!authorize('system:user:add')" type="primary" size="medium" icon="el-icon-plus" @click="toPageAdd">添加</el-button>
                    <el-button :disabled="!authorize('system:user:delete')" type="danger" size="medium" icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
                </el-form>
            </div>	        
	
			<!-- 表格 -->
	        <el-table
	                :data="list"
	                border fit
	                highlight-current-row
	                v-loading="listLoading"
	                element-loading-text="给我一点时间"
	                empty-text="-"
                    :row-class-name="tableRowClassName"
	                @selection-change="handleSelectionChange">
	
	            <el-table-column type="selection" width="55" align="center"></el-table-column>
	            <el-table-column type="index" width="55" align="center"></el-table-column>
	
				<el-table-column label="ID" align="center">
	                <template slot-scope="scope"> {{ scope.row.id }} </template>
	            </el-table-column>
				<!-- <el-table-column label="工号" align="center">
	                <template slot-scope="scope"> {{ scope.row.num }} </template>
	            </el-table-column> -->
				<el-table-column label="姓名" align="center">
	                <template slot-scope="scope"> {{ scope.row.name }} </template>
	            </el-table-column>
                <el-table-column label="性别" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.sex === 1">男</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.sex === 2">女</el-tag>
                        <el-tag type="info" v-else>未知</el-tag>
                    </template>
                </el-table-column>
				<el-table-column label="出生日期" align="center" width="100">
	                <template slot-scope="scope"> {{scope.row.birthDate | parseTime('{y}-{m}-{d}')}} </template>
	            </el-table-column>
				<el-table-column label="手机号码" align="center" width="120">
	                <template slot-scope="scope"> {{ scope.row.mobile }} </template>
	            </el-table-column>
				<el-table-column label="邮箱" align="center" width="220" :show-overflow-tooltip="true">
	                <template slot-scope="scope"> {{ scope.row.email }} </template>
	            </el-table-column>
				<!-- <el-table-column label="地址" align="center">
	                <template slot-scope="scope"> {{ scope.row.address }} </template>
	            </el-table-column> -->
				<el-table-column label="专业" align="center" width="150">
	                <template slot-scope="scope"> {{ scope.row.profession }} </template>
	            </el-table-column>
				<el-table-column label="毕业学校" align="center" width="220">
	                <template slot-scope="scope"> {{ scope.row.university }} </template>
	            </el-table-column>
				<el-table-column label="毕业日期" align="center" width="100">
	                <template slot-scope="scope"> {{scope.row.graduationDate | parseTime('{y}-{m}-{d}')}} </template>
	            </el-table-column>
                <!-- （1：在职，2：离职，3：停薪留职，4：退休） -->
				<el-table-column label="员工状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.empState === 1">在职</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.empState === 2">离职</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.empState === 3">停薪留职</el-tag>
                        <el-tag type="info" v-else-if="scope.row.empState === 4">退休</el-tag>
                        <el-tag type="info" v-else>未知</el-tag>
                    </template>
	            </el-table-column>
                <!-- （1：正式工，2：合同工，3：临时工，4：试用期员工） -->
				<el-table-column label="员工类型" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.empType === 1">正式工</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.empType === 2">合同工</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.empType === 3">临时工</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.empType === 4">试用期员工</el-tag>
                        <el-tag type="info" v-else>未知</el-tag>
                    </template>
	            </el-table-column>
                <!-- （1：普通职员，2：高级职员，3：核心员工） -->
				<el-table-column label="职称等级" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.empLevel === 1">普通职员</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.empLevel === 2">高级职员</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.empLevel === 3">核心员工</el-tag>
                        <el-tag type="info" v-else>未知</el-tag>
                    </template>
	            </el-table-column>
				<el-table-column label="入职时间" align="center" width="100">
	                <template slot-scope="scope"> {{scope.row.entryDate | parseTime('{y}-{m}-{d}')}} </template>
	            </el-table-column>
				<el-table-column label="转正日期" align="center" width="100">
	                <template slot-scope="scope"> {{scope.row.becomeDate | parseTime('{y}-{m}-{d}')}} </template>
	            </el-table-column>
				<el-table-column label="离职日期" align="center" width="100">
	                <template slot-scope="scope"> {{scope.row.dimissionDate | parseTime('{y}-{m}-{d}')}} </template>
	            </el-table-column>
				<el-table-column label="所属部门" align="center" width="150">
	                <template slot-scope="scope"> {{ scope.row.organizationName }} </template>
	            </el-table-column>
				<el-table-column label="所属岗位" align="center" width="160">
	                <template slot-scope="scope"> {{ scope.row.positionName }} </template>
	            </el-table-column>
				<el-table-column label="到岗时间" align="center" width="100">
	                <template slot-scope="scope"> {{scope.row.toPositionDate | parseTime('{y}-{m}-{d}')}} </template>
	            </el-table-column>
				
                <el-table-column label="状态" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status === true">正常</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="150px" align="center">
                    <template slot-scope="scope"> {{scope.row.ctime | parseTime('{y}-{m}-{d} {h}:{i}')}}</template>
                </el-table-column>
                <el-table-column label="更新时间" width="150px" align="center">
                    <template slot-scope="scope"> {{scope.row.ctime | parseTime('{y}-{m}-{d} {h}:{i}')}}</template>
                </el-table-column>
	            <el-table-column label="操作" width="180px" align="center">
	                <template slot-scope="scope">
	                    <el-button v-if="authorize('upms:oaperson:update')" size="small" type="primary" icon="edit" @click="handleUpdate(scope.row)">编辑</el-button>
	                    <el-button v-if="authorize('upms:oaperson:delete')" size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
	                </template>
	            </el-table-column>
	        </el-table>
	
			<!-- 分页工具栏 -->
	        <div v-if="!listLoading" class="pagination-container">
	            <el-pagination
	                    @size-change="handleSizeChange"
	                    @current-change="handleCurrentChange"
	                    :current-page="listQuery.page"
	                    :page-sizes="[10, 20, 30, 50, 100]"
	                    :page-size="listQuery.limit"
	                    layout="total, sizes, prev, pager, next, jumper"
	                    :total="total">
	            </el-pagination>
	        </div>
	
		</div>    	
		<back-to-top></back-to-top>
    </div>
</template>

<script>
    import { created, updated, deleted, selectOne, selectList, selectPage } from '@/api/oa/OaPerson'
    import { selectTree as selectOrganizationTree } from "@/api/oa/OaOrganization";
    import { selectTree as selectPositionTree } from "@/api/oa/OaPosition";
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import BackToTop from "@/components/BackToTop/index";
    import valid from '@/libs/rules'

    const statusOptions = [{label: '正常', key: true}, {label: '锁定', key: false}]

    export default {
        name: 'OaPerson',
        components: {BackToTop},
        data() {
            let required = valid.required()
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10,
                    orderBy: 'emp_state asc, ctime desc',
                    orgId: null,
                    positionId: null
                },
                rules: {
                    example: [required]
                },
                multipleSelection: [],
                statusOptions,

                organizationOptions: [],
                positionOptions: [],
                defaultProps: {
                    label: "name",
                    value: "id",
                    children: "children"
                },
                orgIds: [],
                positionIds: [],

            }
        },
        created() {
            this.getPage()
            this.getOrganizationOptions()
            this.getPositionOptions()
        },
        methods: {
            toPageAdd() {
                this.$router.push({ path: 'addPerson' })
            },
            handleChangeOrganizationCascader(value) {
                if(value.length > 0) {
                    this.listQuery.orgId = value[value.length - 1]
                } else {
                    this.listQuery.orgId = null
                }
                this.getPage()
            },
            handleChangePositionCascader(value) {
                if(value.length > 0) {
                    this.listQuery.positionId = value[value.length - 1]
                } else {
                    this.listQuery.positionId = null
                }
                this.getPage()
            },
            getOrganizationOptions() {
                selectOrganizationTree().then(response => {
                    this.organizationOptions = response.data.data;
                });
            },
            getPositionOptions() {
                selectPositionTree().then(response => {
                    this.positionOptions = response.data.data;
                });
            },
        	authorize(auth) {
				return isAuth(auth) //按钮权限验证
            },
            handleFilter() {//条件过滤
                this.listQuery.page = 1
                this.getPage()
            },
            handleResetFilter() {//重置过滤条件
                this.cancel('filterForm')
                
                this.listQuery.orgId = null
                this.listQuery.positionId = null
                this.orgIds = []
                this.positionIds = []

                this.getPage()
            },
            
            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.listQuery.page = 1
                this.listQuery.limit = val
                this.getPage()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getPage()
            },
            handleUpdate(row) {//修改数据窗口
                this.$router.push({ path: 'addPerson', query: {id: row.id} })
            },
            handleDelete(row) {//批量删除数据
                let ids = []
                if (row.id != undefined) {
                    ids.push(row.id)
                } else {
                    if (this.multipleSelection.length > 0) {
                        for (let item of this.multipleSelection) {
                            ids.push(item.id)
                        }
                    }
                }
                if (ids.length <= 0) {
                    this.$notify({
                        title: '提示', message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                } else {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                       deleted({idList: ids}).then(response => {
                            if(ResultMessage(response)) {
                                this.getPage()
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '删除失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }).catch(() => {})
                }
            },
            getData(id) { //根据ID查询数据
                this.listLoading = true
                return selectOne(id).then(response => {
                    if(ResultMessage(response, false)) {
                        this.listLoading = false
                        return response
                    } else {
                        this.listLoading = false
                        return null
                    }

                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '根据ID获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.listLoading = false
                })
            },
            getPage() {//查询分页列表
                this.listLoading = true
                selectPage(this.listQuery).then(response => {
                    if(ResultMessage(response, false)) {
                        this.list = response.data.data.list
                        this.total = parseInt(response.data.data.total)
                        this.listLoading = false
                    } else {
                        this.listLoading = false
                    }
                }).catch(error => {
                    this.listLoading = false
                    this.$notify({
                        title: '提示', message: '查询列表失败',
                        type: 'error', duration: 2000
                    })
                })
            },
            create(formName) {//添加数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        created(this.form).then(response => {
                        	if(ResultMessage(response)) {
                                this.handleResetFilter()
                            } else {
                                this.dialogFormVisible = false
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '添加失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },
            update(formName) {//修改数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        updated(this.form).then(response => {
                            if(ResultMessage(response)) {
                                this.getPage()
                            }
                            this.dialogFormVisible = false
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '修改失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },
            cancel(formName) {
                this.dialogFormVisible = false
                const set = this.$refs
                set[formName].resetFields()
                this.form = {
                    sex: 1,
                    status: true
                }
            },
            tableRowClassName({row, rowIndex}) {
                if (row.status === false) {
                    return 'del-row';
                }
                return '';
            }
        }
    }
</script>

<!-- 全局样式 -->
<style rel="stylesheet/scss" lang="scss">
.el-cascader-menu{
    width: 200px;
}
.el-table .del-row {
    color: red;
    text-decoration:line-through;
}
</style>
<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>